<template>
	<view class="find">
		<view class="nav-item">
			<view  @tap="changdat" :class="{red:current == 0}"> 精选文章</view>
			<view @tap="changTap" :class="{red:current == 1}">品牌列表</view>
		</view>
		
		
		<!--精选文章 -->
		
		
		<!-- 品牌列表 -->
		<view v-if="current==1" class="article-list">
			<view v-for="(item,index) in findlist" :key="item.index" class="article-block">
					<image :src="item.bigPic" class="img"></image>
					<view class="ctitle">{{item.name}}</view>
			</view>
		</view>
		
		<!-- 精品文章 -->
		<view v-else class="article-list">
			<view v-for="item in Article" :key="item.id" class="article-block" @tap="article(item.id)">
				<image :src="item.coverImg" class="img"></image>
				<view class="ctitle">{{ item.title }}</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import { findBrandsByPage, findArticleByPage } from"../../api/find/index.js"
	export default {
		data() {
			return {
				h:0,   //胶囊距离
				current:0, //tab栏的颜色判断通过下标
				findlist:[], //品牌列表
				Article:[], //精选文章
				
			};
		},
		created( option ){
			//胶囊距离
			// ifdef 让在特殊注释里面的代码仅在某一平台才会生效
			// #ifdef MP-WEIXIN
				var menu = uni.getMenuButtonBoundingClientRect();
				// console.log("获取到的按钮信息为",uni.getMenuButtonBoundingClientRect())
				// var _this = this;
				this.h = menu.height + menu.top;
			// #endif
			this.inita(); //精选文章
			this.init();  //品牌列表
		},
		onLoad( on ) {
			
		},
		
		methods:{
			// 精选文章
			changdat(){
				this.current = 0;
				
			},
			article(all){
			uni.navigateTo({
				url:`./articleInfo/articleInfo?id=${all}`
			})	
			},
			// 品牌列表
			changTap(){
				this.current=1;
				
			},
			init(){
				// 显示品牌列表
				findBrandsByPage(1,5)
				.then(res=>{
					console.log(res);
					this.findlist =res.data.rows

				})	
			},
			inita(){
				//显示精选文章
				findArticleByPage(1,5)
				.then(res=>{
					console.log(res);
					this.Article=res.data.rows
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.find{
		background-color: #F1ECE7;
		padding-top:var(--status-bar-height);
		overflow: hidden;
		.nav-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 88rpx;
			background-color: #354E44;
				view:nth-child(1){
					margin: 40rpx;
			}
				.red{
					color: red;
				}
		}
		// 精品文章
		.article-list{
			

			.article-block{
				position: relative;
				width: 337px;
				height: 241px;
				border-radius: 12px;
				background-color: #fff;
				margin: 14px auto;
				overflow: hidden;
				.img{
					width: 100%;
					height: 100%;
				}
				.ctitle{
					position: absolute;
					bottom: 80rpx;
					left: 80rpx;
					z-index: 999;
					font-size: 40rpx;
					font-weight: 700;
					color: #FFFFFF;
				}
			}
		}
			
	}
		

</style>
